<template>
    <rx-layout>
        <div slot="center">
            <rx-fit>
                <div slot="toolheader" border="false" foldbtn="false">
                    <div class="table-operator">
                        <a-button  @click="reload">{{i18n('list.reload','重新加载')}}</a-button>
                        <a-button  @click="up">{{i18n('list.MoveUp','上移')}}</a-button>
                        <a-button  @click="down">{{i18n('list.MoveDown','下移')}}</a-button>
                        <a-button type="danger" @click="delRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
                    </div>
                </div>
                <rx-grid
                    ref="columnConf"
                    bordered
                    :allowRowSelect="true"
                    :showPage="false"
                    :multiSelect="true"
                    :columns="columns"
                    :dataSource="columnConfs"
                    id-field="idx_"
                    @selectChange="onSelectChange"
                >
                    <span slot="columnName" slot-scope="{text,record}">
                        <a-input style="width: 100%;" v-model="record.columnName" />
                    </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
import {RxLayout, RxGrid, RxFit,GridMixin,Util} from "@lowcode/jpaas-common-lib";
export default {
    name: "ColumnConf",
    props:["instColumn","listColumns"],
    mixins:[GridMixin],
    components: {
        RxGrid,
        RxLayout,
        RxFit
    },
    data() {
        return {
            columnConfs:[],
            selectedRowKeys:[],
            columns:[
                {title: this.$ti18('rxList.index','序号'), type: 'indexColumn', width: 40, dataIndex: 'serial', scopedSlots: {customRender: 'serial'}},
                {title: this.i18n('form.fieldKey','字段Key'), dataIndex: 'field', width: 100},
                {title: this.i18n('form.oldName','原名称'), dataIndex: 'oldName', width: 100},
                {title: this.i18n('form.newName','新名称'), dataIndex: 'columnName', width: 100,scopedSlots: {customRender: 'columnName'}}
            ]
        }
    },
    created() {
        if(this.instColumn && this.instColumn.columnConfs.length>0){
            this.columnConfs=JSON.parse(JSON.stringify(this.instColumn.columnConfs));
        }else {
            this.init();
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formColumnPersonalized", key);
        },
        //初始化
        init(){
            for (let i = 0; i < this.listColumns.length; i++) {
                this.columnConfs.push({
                    idx_: Util.randomId(),
                    field:this.listColumns[i].value,
                    oldName:this.listColumns[i].label,
                    columnName:""
                });
            }
        },
        //重新加载
        reload(){
            for (let i = 0; i < this.listColumns.length; i++) {
                var listColumn=this.listColumns[i];
                var columnConf= this.columnConfs.find(function (item) {
                    if(listColumn.value==item.field){
                        return item;
                    }
                });
                if(!columnConf){
                    this.columnConfs.push({
                        idx_: Util.randomId(),
                        field:listColumn.value,
                        oldName:listColumn.label,
                        columnName:""
                    });
                }
            }
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        //删除
        delRow(){
            this.$refs.columnConf.removeRows();
        },
        //上移
        up(){
            this.$refs.columnConf.moveUp(this.selectedRowKeys);
        },
        //下移
        down(){
            this.$refs.columnConf.moveDown(this.selectedRowKeys);
        },
        getColumnConfs(){
            return this.$refs.columnConf.getData();
        }
    },
    watch: {}
}
</script>

<style scoped>

</style>